<template>
    <div class="login column-center">
        <div class="top row">
            <h1>JJ</h1>
            <img src="./../assets/img/ico.png">
            <h4>账号</h4>
        </div>
        <div class="content column">
            <h1>登陆JJ</h1>
            <div class="center row">
                <div class="left">
                    <el-form ref="form"
                        :model="form"
                        size="small"
                        label-width="60px">
                        <el-form-item label="账号">
                            <el-input v-model="form.account"
                                style="width:200px"></el-input>
                        </el-form-item>
                        <el-form-item label="密码">
                            <el-input v-model="form.password"
                                style="width:200px"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-checkbox size="mini">
                                <span>下次自动登录 </span>
                            </el-checkbox>
                            <span> | 忘记密码了</span>
                        </el-form-item>
                        <el-form-item>
                            <button class="btn"
                                @click="toLogin">登陆</button>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="right column">
                    <span>> 还没有JJ帐号？<router-link class="clearline"
                            to="/reg">立即注册</router-link></span>
                    <span>> 点击下载JJ移动应用</span>
                </div>
            </div>
        </div>
        <footer class="footer">
            <Footer></Footer>
        </footer>
    </div>
</template>
<script>
import Footer from "@/components/Footer"
import dayjs from "dayjs"
import Cookies from "js-cookie"
import { mapActions } from "vuex"
export default {
    name: "login",
    components: {
        Footer
    },
    data() {
        return {
            form: {
                account: "",
                password: ""
            }
        }
    },
    methods: {
        ...mapActions(["logined"]),
        async toLogin() {
            let accountData = await this.logined(this.form)
            if (!accountData) {
                return false
            }
            let sessionId = accountData.msg
            if (sessionId) {
                let saveTime = dayjs().add(1, "hour")
                Cookies.set("sessionId", sessionId, { expires: 1, path: "/" })
                this.$message({
                    message: "登录成功",
                    type: "success"
                })
                this.$router.push("/")
                console.log(saveTime)
            }
        }
    }
}
</script>
<style lang="less" scoped>
    .login {
        align-items: center;
        .top {
            width: 70vw;
            box-sizing: border-box;
            min-height: 80px;
            align-items: center;
            margin-top: 30px;
            h1 {
                font-size: 36px;
                color: #4fca6c;
            }
            img {
                width: 40px;
            }
            h4 {
                font-size: 20px;
                color: #4fca6c;
                margin-left: 30px;
            }
        }
        .content {
            box-sizing: border-box;
            min-height: calc(100vh - 280px);
            width: 70vw;
            h1 {
                font-size: 25px;
            }
            .center {
                min-height: 300px;
                width: 100%;
                .left {
                    width: 50%;
                    min-height: 300px;
                    span {
                        font-size: 12px;
                    }
                    .btn {
                        color: #ffffff;
                        background: #3fa156;
                        border: 1px solid #528641;
                        cursor: pointer;
                        font-size: 14px;
                        font-weight: bold;
                        padding: 6px 26px;
                        border-radius: 3px;
                    }
                }
                .right {
                    width: 50%;
                    min-height: 300px;
                    padding: 80px;
                    span {
                        font-size: 12px;
                    }
                }
            }
        }
        .footer {
            width: 70vw;
        }
    }
</style>
